<template>
  <!-- 井盖界面 -->
  <div class="warp">
    <div class="heard">
      <Top></Top>
    </div>
    <div class="content">
      <div class="left">
        <div class="left-title">
          <div>
            <span>井盖资源</span>
          </div>
        </div>
        <div class="left-tfxq">
          <div class="left-tfxq-name"><span>井盖总量（个）</span></div>
          <div class="left-tfxq-num">
            <div class="tfxq-wellLid-num">
              {{ tfxqWellLidNum }}
            </div>
          </div>
        </div>
        <div class="left-xlh">
          <div class="left-xlh-title">
            <i>其中</i>
          </div>
          <div class="left-xlh-box">
            <div
              class="xlh-wellLib-num"
              v-for="(item, i) in xlhWellLibdata"
              :key="i"
            >
              <span class="wellLib-font">{{ item.num }}</span>
              <span class="wellLib-title">{{ item.title }}(个)</span>
              <!-- <div class="wellLib-img">
                <img src="../../static/天府新区/切图/井盖-资源2.png" alt="" />
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="center-title left-title">
          <div><span>感知元</span></div>
        </div>
        <div class="zhanwei">
          <div class="center-wellLib-monitoring">
            <span>智能监控井盖（个）</span
            ><span class="wellLib-monitoring-num">{{
              monitoringWellLibNum || 0
            }}</span>
          </div>
        </div>
        <!-- 空心饼图 -->
        <div class="container-box">
          <div id="container" style="height: 4rem"></div>
        </div>
      </div>
      <div class="right">
        <div class="right-title left-title">
          <div><span>本年度报警巡查</span></div>
        </div>
        <div class="right-content">
          <div
            class="right-content-box"
            v-for="(item, i) in policePatrolData"
            :key="i"
          >
            <div><img :src="item.icon" alt="" /></div>
            <span class="right-content-num">{{ item.num }}</span>
            <span class="right-content-title">{{ item.title }}(次)</span>
          </div>
        </div>
      </div>
    </div>
<!--    <div class="froot">-->
<!--      <Bottom class="bottom"></Bottom>-->
<!--    </div>-->
  </div>
</template>

<script>
import Top from "@/components/top/Top.vue"; //顶部组件
import Bottom from "@/components/bottom/Bottom.vue"; //底部按钮组件
import flexble from "@/utils/index";
import * as echarts from "echarts";
import { getnum } from "@/api/atmosphere";
import { instance3 } from "@/utils/request";
// import {
//   manholeCoveCount,
//   manholeCoverSwitchCount,
//   manholeCoverAlarmCount,
//   InspectionCount
// } from "@/api/api_well";
export default {
  name: "wellLid",
  components: {
    Top,
    Bottom,
  },
  data() {
    return {
      number: {
        offStateNum: 0, //关闭状态数量
        onStateNum: 0, //开启状态数量
        noNum:0,//未到位
      },

      policePatrolData: [
        {
          icon: require("../../static/天府新区/切图/井盖-监控异常报警.png"),
          num: 342,
          title: "异常报警",
        },
        {
          icon: require("../../static/天府新区/切图/井盖-巡检处置.png"),
          num: 12,
          title: "巡检处置",
        },
      ], //报警巡查数据
      monitoringWellLibNum: "3,873", //智能井盖监控数量
      noopsycheWellLibNum: 3873, //智能井盖数量
      xlhWellLibdata: [
        //兴隆湖井盖数据
        { title: "路灯井盖", num: 0 },
        { title: "移动井盖", num: 0 },
        { title: "联通井盖", num: 0 },
        { title: "广电井盖", num: 0 },
        { title: "水务井盖", num: 0 },
        { title: "电力井盖", num: 0 },
        { title: "燃气井盖", num: 0 },
        { title: "雨水井盖", num: 0 },
        { title: "污水井盖", num: 0 },
      ],
      tfxqWellLidNum: "4845", //天府新区井盖资源数量
    };
  },
  mounted() {
    // 缓存执行
    setTimeout(() => {
      this.initData();
    }, 500);

    this.well();
    this.start_close();
    this.abnormal();
    this.inspection();
    this.boxPosition();
  },

  methods: {
    // 井盖总数
    async num() {
      try {
        let res = await getnum({
          restypeid: 4101,
        });
        this.tfxqWellLidNum = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 通用
    async num2() {
      try {
        let res = await getnum({
          restypeid: 4102,
        });

        this.xlhWellLibdata[0].num = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 移动
    async num3() {
      try {
        let res = await getnum({
          restypeid: 4103,
        });

        this.xlhWellLibdata[1].num = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 联通
    async num4() {
      try {
        let res = await getnum({
          restypeid: 4104,
        });

        this.xlhWellLibdata[2].num = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 广电
    async num5() {
      try {
        let res = await getnum({
          restypeid: 4105,
        });

        this.xlhWellLibdata[3].num = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 水务
    async num6() {
      try {
        let res = await getnum({
          restypeid: 4106,
        });

        this.xlhWellLibdata[4].num = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 电力
    async num7() {
      try {
        let res = await getnum({
          restypeid: 4107,
        });

        this.xlhWellLibdata[5].num = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 燃气
    async num8() {
      try {
        let res = await getnum({
          restypeid: 4108,
        });

        this.xlhWellLibdata[6].num = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 雨水
    async num9() {
      try {
        let res = await getnum({
          restypeid: 4109,
        });

        this.xlhWellLibdata[7].num = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 污水
    async num10() {
      try {
        let res = await getnum({
          restypeid: 4110,
        });
        this.xlhWellLibdata[8].num = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 智能监控井盖
    async well() {
      var that = this;
      instance3.post("/manholeCoveCount").then((res) => {
        that.monitoringWellLibNum = res.data.data.count;
      });
    },
    // 智能监控井盖 - 开启/关闭状态
    async start_close() {
      instance3.post("/manholeCoverSwitchCount").then((res) => {
        if (res.data.data == "") {
          this.number.onStateNum = 0;
          this.number.offStateNum = 0;
        } else {
          res.data.data.forEach((i) => {
            if (i.status == "打开") {
              this.number.onStateNum = i.count;
            } else if (i.status == "关闭") {
              this.number.offStateNum = i.count;
            } else if(i.status == "未到位"){
              this.number.noNum = i.count;
            }
          });
        }
      });
    },
    // // 异常报警
    async abnormal() {
      instance3.post("/manholeCoverAlarmCount").then((res) => {
        this.policePatrolData[0].num = res.data.data.count;
      });
    },
    // // 巡检处置
    async inspection() {
      instance3.post("/InspectionCount").then((res) => {
        this.policePatrolData[1].num = res.data.data.count;
      });
    },
    //初始化数据
    initData() {
      let myChart = echarts.init(document.getElementById("container"));
      let option;
      option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "35%"],
            labelLine: {
              length: 20,
              length2: 70,
            },
            avoidLabelOverlap: false,
            fontSize: "20",
            data: [
              {
                value: `${this.number.onStateNum}`,
                name: "开启状态",
                itemStyle: {
                  color: "#0480d8",
                },
              },
              {
                value: `${this.number.offStateNum}`,
                name: "关闭状态",
                itemStyle: {
                  color: "#cf870e",
                },
              },
              {
                value: `${this.number.noNum}`,
                name: "未到位",
                itemStyle: {
                  color: "red",
                },
              },
            ],
            color: ["#cf870e", "#0480d8"],
            label: {
              formatter: "{a|{b}}\n{b|{c}}\n\n",
              padding: [0, -60],
              borderWidth: 10,
              textStyle: {
                fontSize: "16",
                lineHeight: 32,
                color: "#c7ecf4",
              },
              rich: {
                a: {
                  fontSize: 16,
                  lineHeight: 20,
                  color: "#c7ecf4",
                },
                b: {
                  fontSize: 24,
                  lineHeight: 36,
                  fontWeight: "700",
                  textStyle: {
                    color: ["#cf870e", "#0480d8"],
                  },
                },
              },
              emphasis: {
                //文本样式
                show: true,
                textStyle: {
                  fontSize: "16",
                },
              },
            },
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
    },
    boxPosition() {
      let content = document.querySelector(".content");
      let heard = document.querySelector(".heard");
      content.style.top =
        (document.body.offsetHeight -
          content.offsetHeight -
          document.querySelector(".bottom").offsetHeight -
          heard.offsetHeight -
          document.querySelector(".bottom").offsetHeight * 0.2) /
          2 +
        heard.offsetHeight +
        "px"; //计算中间大盒子的定位top值
      content.style.left =
        (document.querySelector(".warp").clientWidth - content.clientWidth) /
          2 +
        "px"; //计算中间大盒子的定位left值
    },
  },
  async created() {
    await this.num();
    await this.num2();
    await this.num3();
    await this.num4();
    await this.num5();
    await this.num6();
    await this.num7();
    await this.num8();
    await this.num9();
    await this.num10();
  },
};
</script>
<style>
/* 自定义字体  京东朗正字体 */
@font-face {
  /* font-properties */
  font-family: elect;
  src: url("../../assets/tfxq/typeface/jd.ttf"); /* IE9 */
}
/* 自定义字体 DS-DIGIB（棍型字体） */
@font-face {
  /* font-properties */
  font-family: cudgelFont;
  src: url("../../assets/tfxq/typeface/DS-DIGIB.TTF"); /* IE9 */
}
@font-face {
  /* font-properties */
  font-family: dINCondbold;
  src: url("../../assets/tfxq/typeface/DINCond-Bold.otf"); /* IE9 */
}
</style>
<style lang="less" scoped>
.warp {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  // align-items: center;
  position: relative;
}
.heard {
  width: 100%;
}
// 中间的数据展示样式
.content {
  // width: 94%;
  width: 22.475rem;
  padding: 1.15rem 0 1rem 0;
  background-image: url("../../static/天府新区/切图/井盖-修饰.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  // transform: translate(0, 1%);
  border-image: linear-gradient(
      79deg,
      rgba(4, 253, 252, 0.3),
      rgba(39, 53, 85, 0.3),
      rgba(4, 253, 252, 0.3)
    )
    2 2;
  position: absolute;
  top: 0;
  left: 0;
}
.left {
  // width: 32.6%;
  width: 7.85rem;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 0 20px 20px 20px;
  position: relative;
}
.center {
  // width: 23.75%;
  width: 5.725rem;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 0 20px 20px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  // padding-bottom: 23px;
}
.right {
  // width: 25.83%;
  width: 6.225rem;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 0 20px 20px 20px;
  // margin: 98px 0 70px 0;
  position: relative;
}
// 井盖资源、兴隆湖
.content > div:nth-child(2) {
  margin: 0 20px;
}
.left-title {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, -100%);
}
.left-title::after {
  content: "";
  display: inline-block;
  // width: 60%;
  width: 2.8125rem;
  height: 26px;
  background-image: url("../../static/天府新区/切图/井盖-修饰2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position-y: center;
  position: absolute;
  left: 149px;
  top: 50%;
  transform: translate(0, -50%);
}
.left-title > div {
  display: inline-block;
  min-width: 114px;
  color: #b7e4fc;
  padding: 0 10px 0 0.5rem;
  line-height: 48px;
  font-size: 0.2rem;
  display: inline-block;
  border-radius: 20px 0 0 0;
  background-color: rgba(24, 34, 61, 0.5);
  font-family: Microsoft YaHei;
  font-weight: 600;
  position: relative;
}
.left-title > div::before {
  content: "";
  display: inline-block;
  width: 60%;
  height: 60%;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translate(0, -50%);
  background: linear-gradient(90deg, #1856aa, #212f4f);
  // background-image: linear-gradient(
  //   to right,
  //   rgba(54, 127, 158, 0.8),
  //   transparent
  // );
  z-index: -1;
}
.left-title > div::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 24px solid rgba(24, 34, 61, 0.5);
  border-right: 12px solid rgba(24, 34, 61, 0.5);
  border-left: 12px solid rgba(24, 34, 61, 0.5);
  border-bottom: 24px solid rgba(24, 34, 61, 0.5);
  border-color: transparent transparent rgba(24, 34, 61, 0.5)
    rgba(24, 34, 61, 0.5);
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%, 0);
}
.left-tfxq {
  width: 5.9875rem;
  background-image: url("../../static/天府新区/切图/井盖-资源1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  line-height: 1.2rem;
  //   padding: 30px 0;
  // margin: 1rem 1.09375rem 0.9375rem;
  margin: 0.4375rem 0.95rem 0.3rem 0.9125rem;
}
.left-tfxq-name {
  display: flex;
  justify-content: center;
  align-items: center;
}
.left-tfxq-name > span {
  // font-family: Microsoft YaHei;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #a0effb;
  font-size: 0.25rem;
  margin-right: 0.315rem;
}
.left-tfxq-num {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tfxq-wellLid-num {
  width: 1.425rem;
  background: linear-gradient(0deg, #18b6cb, #1480d4);
  box-shadow: 0px 11px 9px 0px rgba(23, 22, 83, 0.4);
  border-radius: 5px;
  text-align: center;
  font-size: 0.525rem;
  font-family: dINCondbold;
  font-weight: bold;
  color: #ffffff;
  line-height: 0.6125rem;
  margin: 0 5px;
  border-radius: 5px;
}
.left-xlh-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.2rem 0;
}
.left-xlh-box > div {
  // width: 30%;
  width: 27%;
  // margin-right: 10px;
  // margin-top: 0.2rem;
  border-right: 1px solid #223462;
  border-bottom: 1px solid #223462;
  padding: 0.275rem 0;
}
.left-xlh-box > div:nth-child(3n) {
  margin-right: 0;
  border-right-color: transparent;
}
.left-xlh-box > div:nth-child(7) {
  border-bottom-color: transparent;
}
.left-xlh-box > div:nth-child(8) {
  border-bottom-color: transparent;
}
.left-xlh-box > div:last-child {
  border-bottom-color: transparent;
}
.left-xlh-title {
  width: 90%;
  margin: 0 auto;
  background-image: url("../../static/天府新区/切图/井盖-修饰3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 5px 0 10px 20px;
}
.left-xlh-title > i {
  font-size: 0.225rem;
  font-family: YOUSHEhaoshenti;
  font-weight: 400;
  font-style: italic;
  color: #baf7fe;
}
.xlh-wellLib-num {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
}
.wellLib-font {
  // font-family: cudgelFont;
  font-family: dINCondbold;
  text-shadow: 2px 1px 2px rgba(18, 36, 57, 0.8);
  // line-height: 190%;
  font-weight: bold;
  font-size: 0.35rem;
  color: #00fc8f;
}
.wellLib-title {
  color: #badef7;
  // padding-top: 5px;
  color: #b3f3fa;
  font-size: 0.175rem;
  margin-top: 11px;
}
.wellLib-img {
  // width: 70%;
  width: auto;
  font-size: 0;
}
.wellLib-img > img {
  width: 100%;
}
// 监测
.zhanwei {
  padding: 50px 0 0 0;
}
// .center-title::after {
//   // left: 120px;
//   width: 70%;
// }
.center-title > span {
  color: rgb(186, 222, 247);
}
.center-wellLib-monitoring {
  width: 72%;
  margin: 0 auto;
  background-image: url("../../static/天府新区/切图/井盖-监测.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 1.2375rem;
  color: #badef7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center-wellLib-monitoring > span:first-child {
  margin-right: 10px;
  font-size: 0.225rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #bbedf3;
}
.wellLib-monitoring-num {
  color: #eef61b;
  font-weight: bold;
  // font-family: dINAlternate;
  font-size: 0.375rem;
}

// 智能井盖饼图样式
.container-box {
  position: relative;
  margin-top: 60px;

}
#container {
  width: auto;
}

// 饱经巡查
.right-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // padding-top: 0.6rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.right-content-box {
  // width: 40%;
  width: 2.1375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("../../static/天府新区/切图/井盖-报警.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 0.5125rem;
  // margin: 1.09375rem 0.46875rem 1.40625rem 0;
}
.right-content > div:last-child {
  margin-right: 0;
}
.right-content-box > div {
  width: 0.875rem;
  font-size: 0;
  margin-top: 0.8rem;
}
.right-content-box > div > img {
  width: 100%;
}
.right-content-num {
  margin-top: 0.425rem;
  font-family: elect;
  font-size: 0.375rem;
  font-weight: bold;
  color: #eaf172;
}
.right-content-title {
  padding: 0 0.15625rem;
  margin-bottom: 1.05rem;
  line-height: 200%;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #afdefb;
}
// .right-title::after {
//   width: 70%;
// }
</style>
